import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import classnames from "classnames";
import { Carousel, message, Modal } from "antd";
import { stampToDate } from "../../utils";
import "./index.less";
import bitAward from "../../assets/images/bit-award.png";
import crown from "./svg/icon_crown.png";

class NoticeBar extends Component {
  state = {
    notices: [],
    noticeContent: "<p></p>",
    modalVisible: false,
    lastAward: "",
    lotteryVisible: false,
    startLottery: false,
    openLottery: false,
    lotteryNumber: "",
    lotterySymbol: "UES",
    showNumber: false
  };

  request = window.request;

  componentDidMount() {
    const account = sessionStorage.getItem("account");
    if (account) {
      this.checkLottery();
    } else {
      this.getNotice();
      //请求获奖者
      this.getRealy();
    }
  }

  // 检查是否能够抽奖
  checkLottery = () => {
    this.request("/lottery/check").then(json => {
      if (json.code === 10000000) {
        this.setState({ lotteryVisible: true });
      } else {
        // 请求最新公告
        this.getNotice();
        //请求获奖者
        this.getRealy();
      }
    });
  };

  //抽奖点击 开
  handleLottery = () => {
    this.setState({ startLottery: true });
    this.request("/lottery/do/web", { method: "GET" }).then(json => {
      if (json.code === 10000000) {
        const { coinSymbol, count } = json.data;
        this.setState({
          lotteryNumber: count,
          lotterySymbol: coinSymbol,
          openLottery: true
        });
        setTimeout(() => {
          this.setState({ showNumber: true });
        }, 1500);
      } else {
        message.destroy();
        message.error(json.msg);
      }
    });
  };

  moreNoticeClick = () => {
    this.props.history.push("/notice");
  };

  //获取公告
  getNotice = () => {
    this.request("/cms/notice/list", {
      body: {
        language: "zh_CN",
        currentPage: 1,
        showCount: 3
      }
    }).then(json => {
      if (json.code === 10000000) {
        const notices = json.data.list;
        const latestNoticeId = localStorage.getItem("latestNoticeId");
        if (notices.length > 0 && notices[0].id !== latestNoticeId) {
          const noticeId = notices[0].id;
          this.getNoticeDetail(noticeId);
          localStorage.setItem("latestNoticeId", noticeId);
        }
        this.setState({ notices });
      } else {
        message.error(json.msg);
      }
    });
  };

  //获取公告
  getNoticeDetail = id => {
    this.request("/cms/view/" + id, {
      method: "GET"
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({ noticeContent: json.data.content });
        const { modalVisible } = this.state;
        // 如果没有弹窗
        if (!modalVisible) {
          this.showModal();
        }
      } else {
        message.error(json.msg);
      }
    });
  };

  //获取得奖者名单
  getRealy = () => {
    this.request("/relay/list", {
      method: "POST",
      body: {
        currentPage: 1,
        showCount: 1
      }
    }).then(json => {
      if (json.code === 10000000) {
        if (json.data.list && json.data.list.length > 0) {
          const lastAward = json.data.list[0];
          const latestAwardId = localStorage.getItem("latestAwardId");
          if (lastAward.mail !== latestAwardId) {
            this.showAwardModal(lastAward);
            localStorage.setItem("latestAwardId", lastAward.mail);
          }
          this.setState({
            lastAward
          });
        }
      } else {
        message.error(json.msg);
      }
    });
  };
  showAwardModal = lastAward => {
    this.setState({
      modalVisible: (
        <Modal
          width={440}
          wrapClassName="v-center-modal g-award-model"
          visible={true}
          onCancel={() => {
            this.setState({ modalVisible: "" });
          }}
          footer={null}
        >
          <div
            id="award_modal"
            style={{ position: "relative", width: 440, height: 500 }}
          >
            <img alt="" src={bitAward} className="award-pic" />
            <div className="award-date">
              {lastAward &&
                stampToDate(lastAward.updateDate * 1, "YYYY/MM/DD hh:mm")}
            </div>
            <div className="award-value">
              {lastAward && lastAward.prizeVolume} <span>ues</span>
            </div>
            <div className="award-person">
              {lastAward && lastAward.mail} (中奖者)
            </div>
            <div className="award-refer">
              {lastAward && lastAward.referMail}
              {lastAward && lastAward.referMail && " (推荐人)"}
            </div>
          </div>
        </Modal>
      )
    });
  };

  // 显示抽奖弹窗

  showModal = () => {
    const { localization } = this.props;
    const { noticeContent } = this.state;
    this.setState({
      modalVisible: (
        <Modal
          title={localization["公告"]}
          width={700}
          wrapClassName="v-center-modal g-notice-model"
          visible={true}
          onCancel={this.hideModal}
          footer={null}
        >
          <div dangerouslySetInnerHTML={{ __html: noticeContent }} />
        </Modal>
      )
    });
  };

  hideModal = () => {
    this.setState({ modalVisible: false });
  };

  render() {
    const { localization } = this.props;
    const {
      notices,
      modalVisible,
      lotteryVisible,
      startLottery,
      showNumber,
      lotteryNumber,
      lotterySymbol,
      openLottery
    } = this.state;
    return (
      <div className="scroll-notice">
        <i className="iconfont icon-notice" />
        <Carousel autoplay={true} vertical={true} dots={false}>
          {notices.map(notice => {
            return (
              <div key={notice.id}>
                <Link to={`/notice/${notice.id}`}>
                  {notice.title}
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  {stampToDate(Number(notice.createDate), "YYYY-MM-DD")}
                </Link>
              </div>
            );
          })}
        </Carousel>
        <span className="notice-more" onClick={this.moreNoticeClick}>
          {localization["more"]}
          >>
        </span>
        {modalVisible}

        {
          <Modal
            width={400}
            wrapClassName="v-center-modal g-lottery-model"
            visible={lotteryVisible}
            maskClosable={false}
            onCancel={() => {
              this.setState({ lotteryVisible: false });
            }}
            footer={null}
          >
            <div
              className={classnames({
                "lottery-wrap": true,
                showNumber: showNumber
              })}
            >
              <div
                className={classnames({
                  "lottery-top": true,
                  "open-top": openLottery
                })}
              >
                <img src={crown} alt="" />
                <p>恭喜您获得注册抽奖机会</p>
                <div
                  className={classnames({ open: true, openAnim: startLottery })}
                  onClick={this.handleLottery}
                />
                <div className="lottery-user" />
              </div>
              <div className="lottery-content">
                <p>恭喜你抽中 {lotterySymbol}</p>
                <div className="number">
                  <span>{lotteryNumber}</span> 个
                </div>
                <div className="tips">已存入币币资产</div>
              </div>
              <div
                className={classnames({
                  "lottery-footer": true,
                  "open-footer": openLottery
                })}
              />
            </div>
          </Modal>
        }
      </div>
    );
  }
}

export default withRouter(NoticeBar);
